<template>
	<div class="recommend">
		<div class="home_body_banner">
			<swiper :options="swiperOption" v-if='picture.length!=1'>
				<swiper-slide v-for="(slide, key) in picture" :key="key"><a><img :src='slide.l_img'></a></swiper-slide>
				<div class="swiper-pagination" slot="pagination"></div>
			</swiper>
		</div>
		<div class="liang-top">
			<p class="liang-topTitle">
				<span class="liang-topName" @click="$router.push({path: '/liang'})">限时抢兑</span>
				<span class="liang-topSub">每日兑换</span>
			</p>
		</div>
		<div class="recommend_ss flex">
			<div style="margin-right: 1rem;">
				<span class="recommend_ss_leimu" style="margin: 0;">价格排序</span>
				<i class="el-icon-caret-bottom" style="color: #fff;font-size: 1.4rem;"></i>
			</div>
			<div  class="recommend_ss_input clear2 flex1">
				<input type="text" placeholder="输入品牌名/商品名" />
				<i class="el-icon-search"></i>
			</div>
			<span class="recommend_ss_leimu" @click="fl">分类</span>
			
		</div>
		<div class="liang-body clear2">
			<div class="liang-list" v-for="(data,index) in dataList" @click="$router.push({path: '/liang/productDatil'})">
				<img :style="{'height':Imgheight+'px'}" class="liang-listImg" :src="'../../../../static/img/liang/'+index+'.jpg'" />
				<p class="liang-listName">{{data.Name}}</p>
				<p class="liang-listPrice">￥{{data.Price}}.00</p>
				<p class="liang-listExchange">兑换价：{{data.Exchange}}匠子</p>
				<p class="liang-listStock">库存{{data.Stock}}件</p>
			</div>
		</div>
		<div @click="close" v-show="show1" class="body_bac" :style="{'height':bodyHeight+'px'}"></div>
		<div :class="show2?'in':''" v-show="show1" class="body_leimu" :style="{'min-height':bodyHeight+'px'}" @click.stop="show1=true">
			<img src="../../../../static/img/images/leimu.jpg" />
		</div>
		<v-footer></v-footer>
	</div>
</template>

<script>
	import vFooter from '../../common/footer.vue';
	require('swiper/dist/css/swiper.css');
	import { swiper, swiperSlide } from 'vue-awesome-swiper'
	export default {
		components:{
            vFooter,
            swiper,
			swiperSlide
        },
		data: function() {
			
			return {
				dataList:[{
					'Name':'万岛夫人即食燕窝',
					'Price':'1880.00',
					'Exchange':'1880',
					'Stock':'99'
				}],
				picture:[{
					'l_img':'../../../../static/img/images/l01.png'
				},{
					'l_img':'../../../../static/img/images/l02.png'
				},{
					'l_img':'../../../../static/img/images/l03.png'
				}],
				swiperOption: {
					autoplay: 5000,
					initialSlide: 1,
					loop: true,
					pagination: '.swiper-pagination',
					onSlideChangeEnd: swiper => {
						//						console.log('onSlideChangeEnd', swiper.realIndex)
					},
				},
				imgHeight:0,
				imgHeightX:0,
				imgMargin:0,
				bodyHeight:0,
				guan:[{
					'name':'名淑馆'
				},{
					'name':'绅士馆'
				},{
					'name':'婴幼馆'
				},{
					'name':'慈恩馆'
				},{
					'name':'生活馆'
				},{
					'name':'名淑馆2'
				}],
				guanI:0,
				show1:false,
				show2:false,
			}
		},
		mounted() {
        	this.imgHeight=document.body.offsetWidth*0.95*0.32;
        	this.imgHeightX=document.body.offsetWidth*0.95*0.34*5;
        	this.imgMargin=document.body.offsetWidth*0.95*0.02;
        	this.bodyHeight=document.body.offsetHeight;
		},
		methods: {
			jump(key){
				this.guanI=key
			},
			fl(){
				this.show1=true;
				setTimeout(()=>{
					this.show2=true;
				},300)
			},
			close(){
				this.show2=false;
				setTimeout(()=>{
					this.show1=false;
				},300)
				
			}
		}
	}
</script>

<style scoped>
	.liang-top{
		text-align: center;
    	margin: 1rem 0;
	}
	.liang-topTitle{
		display: inline-block;
		border: 1px solid #000000;
		overflow: hidden;
		height: 2rem;
		box-sizing: border-box;
		border-radius: 0.4rem;
	}
	.liang-topName{
		padding: 0 0.5rem;
		height: 1.9rem;
		line-height: 1.9rem;
		font-size: 1.3rem;
		display: inline-block;
		text-align: center;
		
	}
	.liang-topSub{
		padding: 0 0.5rem;
		height: 1.9rem;
		display: inline-block;
		line-height: 1.9rem;
		font-size: 1.3rem;
		text-align: center;
		color: #f7bd40;
		background: #000;
		
	}
	.recommend_top{
		width: 95%;
		margin: 0 auto;
		overflow: hidden;
	}
	.recommend_top_title{
		width: 100%;
		font-size: 1.6rem;
		border-left: 0.6rem solid #000;
		color: #000;
		padding-left: 1rem;
		line-height: 1.6rem;
		height: 1.6rem;
		margin: 1.5rem 0;
		
	}
	.recommend_top_body{
		overflow: auto;
		width: 100%;
	}
	.recommend_top_body2{
	}
	.recommend_top_img{
		float: left;
		box-sizing: border-box;
		border: 1px solid #000;
	}
	.recommend_top_img:nth-last-child(1){
		margin: 0;
	}
	.recommend_top_img img{
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.recommend_ss{
		width: 95%;
		padding: 0.8rem 2.5%;
		background: #000;
		
	}
	.recommend_ss_input{
		float: left;
		width: 50%;
		background: #fff;
		height: 2.9rem;
		border-radius: 3rem;
		overflow: hidden;
	}
	.recommend_ss_input input{
		height: 2.9rem;
		text-indent: 10%;
		width: 80%;
		border: 0;
		font-size: 1.4rem;
		line-height: 2.9rem;
	}
	.recommend_ss_input i{
		font-size: 1.5rem;
		line-height: 2.9rem;
		float: right;
		margin-right: 7%;
	}
	.recommend_ss_leimu{
		font-size: 1.4rem;
		color: #fff;
		margin-left: 1.7rem;
		line-height: 2.9rem;
	}
	
	.recommend_ss_guan{
		clear: both;
		width: 100%;
		overflow: auto;
		
	}
	.recommend_ss_guan2{
		white-space: nowrap;
	}
	.recommend_ss_span{
		font-size: 1.6rem;
		color: #fff;
		display: inline-block;
		padding: 1.5rem 1rem;
	}
	.recommend_ss_spanactive{
		color: #edb53e;
	}
	.recommend_body{
		width: 95%;
		margin: 0 auto;
		margin-top: 0.8rem;
	}
	.recommend_body_top{
		width: 100%;
		text-align: center;
		font-size: 1.2rem;
		color: #808080;
	}
	.recommend_body_top span{
		color: #ccc;
	}
	.body_bac{
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		background: rgba(0,0,0,0.5);
	}
	.body_leimu{
		width: 50%;
		position: fixed;
		top: 0;
		right: 0;
		background: #fff;
		z-index: 2;
		transform: translate(100%,0);
		transition: transform 0.3s;
	}
	.body_leimu img{
		width: 100%;
		display: block;
	}
	.in{
		transform: translate(0,0);
	}
	.home_body_banner{
		width: 100%;
		background: #b5b5b5;
		font-size: 3rem;
		text-align: center;
		font-weight: bold;
	}
	.home_body_banner img{
		width: 100%;
		display: block;
	}
	.liang-list{
		padding: 1rem 2% 0 2%;
		width: 50%;
		box-sizing: border-box;
		float: left;
		font-family: "微软雅黑";
	}
	.liang-listImg{
		display: block;
		width: 100%;
		object-fit: cover;
		height: 100%;
		box-sizing: border-box;
		border: 2px solid #7a7a7a;
		
	}
	.liang-listName{
		font-size: 1.3rem;
		padding-top: 1.5rem;
		
	}
	.liang-listPrice{
		color: #6a6a6a;
		padding-top: 0.7rem;
		font-size: 1.3rem;
	}
	.liang-listExchange{
		color: #6a6a6a;
		padding-top: 0.6rem;
		font-size: 1.3rem;
	}
	.liang-listStock{
		color: #999999;
		padding-top: 0.6rem;
		font-size: 1rem;
	}
</style>
<style>
	.home_body_banner .swiper-pagination{
		bottom: 0 !important;
	}
	
	.home_body_banner .swiper-pagination-bullet{
		background: #fff;
		opacity: 1;
	}
	.home_body_banner .swiper-pagination-bullet-active{
		background: rgb(247, 189, 64);
	}
</style>